<template>
  <div class="echart">
    <div ref="echarts11" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import { handleDealFilter } from "@/utils/echarts/tool.js";
export default {
  name: "echarts11",
  data() {
    return {
      echarts11: null,
      data: []
    };
  },
  created() {},
  computed: {
    echarts11State() {
      return this.$store.state.echarts11State;
    }
  },
  watch: {
    echarts11State: {
      immediate: true,
      handler(val) {
        let { data } = val;
        if (data.length > 0) {
          this.data = handleDealFilter(data, "pz", "dh");
          this.$nextTick(() => {
            this.init();
          });
        }
      }
    }
  },
  mounted() {
    this.echarts11 = this.$echarts.init(this.$refs.echarts11);
    // setTimeout(() => {
    //   this.echarts11.showLoading({
    //     color: "#ffffff",
    //     textColor: "#ffffff",
    //     maskColor: "rgba(255,255,255,0)",
    //   });
    // }, 500);
  },
  methods: {
    init() {
      var option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 10,
            color: "#fff"
          }
        },
        color: ["#0F21C4", "#3341DB", "#2D5971"],

        series: [
          {
            name: "",
            type: "pie",
            center: ["50%", "55%"],
            radius: ["60%", "65%"],
            label: {
              fontSize: 8,
              color: "#316B84",
              formatter: "{per|{d}%}\n{b}",
              rich: {
                per: {
                  fontSize: 8,
                  fontFamily: "electronicFont"
                }
              }
            },

            labelLine: {
              show: true,
              length: 8,
              length2: 10
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.data
          },
          {
            name: "",
            type: "pie",
            center: ["50%", "55%"],
            radius: ["35%", "50%"],
            animation: false,
            label: {
              show: true,
              color: "#316B84",
              formatter: "络筒",
              position: "center",
              fontStyle: "bolder",
              fontSize:  10
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },

            data: this.data
          }
        ]
      };

      this.echarts11.setOption(option);
      this.echarts11.hideLoading();
      var _this = this;
      window.addEventListener("resize", function () {
        _this.echarts11.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
